<template>
	<view class="index-box">
		<view class="index-left">
			<image src="@/static/images/index/biao1.png" alt="" class="biao-1" />
			<view class="index-left-header">
				<view class="user-left-box" @click="toLogin">
					<view class="img"></view>
					<view class="v-user">
						<image src="@/static/images/index/zuan.png" alt="" class="zuan" />
						<view class="v-user-text">
							Lv.0
						</view>
					</view>
				</view>
				<view class="img-right-user">
					<view class="flex-align-center">
						<span>布朗</span>
						<image src="../../static/images/common/vip-icon.png" class="vip-icon"></image>
					</view>
					<view class="flex-align-center">
						<view class="huangguan-bj flex-center">
							<image src="@/static/images/index/huangg.png" style="margin: 0 auto;"
								class="img-right-user-img" />
						</view>

						<span style="color: #FF8D1A;margin-left: 8rpx;">2127</span>
					</view>
					<view class="flex-align-center">
						<image src="@/static/images/index/zuan1.png" alt="" style="width: 46rpx;height: 33rpx;" />
						<span style="color: #BF6DF4;margin-left: 8rpx;">68</span>
					</view>
					<view class="money img-right-user-img flex-align-center">
						<view class="huangguan-box flex-center">
							<image src="@/static/images/common/￥-icon.png" class="img-right-user-img"
								style="width: 40rpx;height: 33rpx;" />
						</view>

						<span style="color: #FF8D1A;margin-left: 15rpx;">0</span>
					</view>
				</view>
				<view class="rule flex-center">
					规则
				</view>
			</view>
			<view class="review-box flex-center">
				<!-- 智能复习 -->
				<view class="review" @click="toReview">
					<image src="@/static/images/index/deng.png" alt="" style="width: 88rpx;height: 88rpx;" />
					<view class="">
						智能复习
					</view>
					<image src="@/static/images/index/mubiao.png" alt="" style="width: 120rpx;height: 120rpx;" />
				</view>
				<view class="btn-btm-review">
					<view style="margin-bottom: 14rpx;" class="btn-btm-review-item-box flex-between">
						<view class="btn-view" @click="toDailyTask">
							每日任务
						</view>
						<view class="btn-view" @click="toReviewCenter">
							测评中心
						</view>
						<view class="btn-view" @click="toLearningReport">
							学习报告
						</view>
					</view>
					<view class="btn-btm-review-item-box flex-between">
						<view class="btn-view ccc" @click="toQuestionBank">
							优题库
						</view>
						<view class="btn-view ccc" @click="toDictionary">
							优词典
						</view>
						<view class="btn-view ccc" @click="toCollectNote">
							收藏本
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-btn-list">
				<u-grid :col="3" class="bottom-btn-list-grid">
					<u-grid-item @click="toSignIn()">
						<!-- <u-icon name="@/static/images/index/deng.png" :size="42"></u-icon> -->
						<image src="@/static/images/index/qian.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">签到奖励</view>
					</u-grid-item>
					<u-grid-item @click="toClockIn()">
						<image src="@/static/images/index/daka.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">学习打卡</view>
					</u-grid-item>
					<u-grid-item @click="toAward">
						<image src="@/static/images/index/jiangli.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">自学奖励</view>
					</u-grid-item>
					<u-grid-item @click="toRedWars">
						<image src="@/static/images/index/hongbao.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">抢红包</view>
					</u-grid-item>
					<u-grid-item @click="toGame">
						<image src="@/static/images/index/youxi.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">游戏乐园</view>
					</u-grid-item>
					<u-grid-item @click="toPk">
						<image src="@/static/images/index/PK.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">PK</view>
					</u-grid-item>
					<u-grid-item @click="toBillboard">
						<image src="@/static/images/index/paihang.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">排行榜</view>
					</u-grid-item>
					<u-grid-item @click="toMusic">
						<image src="@/static/images/index/yinyue.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">音乐</view>
					</u-grid-item>
					<u-grid-item @click="toMyFriend">
						<image src="@/static/images/index/haoyou.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">我的好友</view>
					</u-grid-item>
					<u-grid-item @click="toShop">
						<image src="@/static/images/index/shangcheng.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">商城</view>
					</u-grid-item>
					<u-grid-item @click="toGlory">
						<image src="@/static/images/index/huizhang.png" alt="" class="bottom-btn-list-item" />
						<view class="grid-text">我的荣耀</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="index-left-bottom">
				<image src="@/static/images/index/set.png" alt="" @click="toSet()" />
				<image src="@/static/images/index/message.png" alt="" />
			</view>
		</view>

		<view class="index-right">
			<view class="index-right-header">
				<view class="index-right-header-left" @click="syncUp()">
					<view class="book">
						<span class="book-name">英语</span>
					</view>
					<view style="padding-left: 28rpx;">
						<view class="" style="position: relative;">
							<view class="title-book">
								冀教版（2022)-七上
							</view>
							<view class="title-book-text">
								冀教版（2022)-七上
							</view>
						</view>

						<view class="desc-book">
							本书共:353、247句
						</view>
					</view>
				</view>
				<view class="index-right-header-right" @click="toTask">
					<image class="task-top-icon" src="@/static/images/index/huix.png"></image>
					<view class="task-title">
						<view>
							任务课程
						</view>
						<view>
							(20个)
						</view>
					</view>
					<image class="task-book" src="@/static/images/index/Flatt3d-Books.png" />
				</view>
			</view>
			<view class="abc-box">
				<view style="width: 100%;">
					<view class="abc-img">
						<view class="abc-text">
							基础 课程
						</view>
					</view>
					<view class="basics-course">
						<view class="basics-course-item" @click="toLetter">
							<image class="basics-course-item-left-img" src="@/static/images/index/zimu.png" />
							<image src="../../static/images/index/zimu-zi.png" class="zimu"></image>
						</view>
						<view class="basics-course-item" style=" margin: 0 40rpx;" @click="toLePhoneticSymbol">
							<image class="basics-course-item-left-img" src="@/static/images/index/yinbiao.png" />
							<image src="../../static/images/index/yinbiao-zi.png" class="yinbiao"></image>
						</view>
						<view class="basics-course-item" style=" width: 320rpx;" @click="toNaturePhonics">
							<image class="basics-course-item-left-img" src="@/static/images/index/abc1.png" />
							<image src="../../static/images/index/ziranpindu.png" class="ziranpindu"></image>
						</view>
					</view>
					<view class="flex-align-center" style="margin-top: 60rpx;">
						<view class="">
							<view class="abc-img">
								<view class="abc-text">
									拓展课程
								</view>
							</view>
							<view class="expand-list">
								<view class="expand-list-item" @click="syncUp">
									<view>
										词汇
									</view>
									<image style="height: 60rpx;width: 60rpx; " src="@/static/images/index/abc1.png" />
								</view>
								<view class="expand-list-item" @click="syncUp">
									<view>
										句子
									</view>
									<image style="height: 60rpx;width: 60rpx; " src="@/static/images/index/juzi.png" />
								</view>
								<view class="expand-list-item" @click="toExpand">
									<view>
										语法
									</view>
									<image style="height: 60rpx;width: 60rpx; " src="@/static/images/index/yufa.png" />
								</view>
								<view class="expand-list-item" @click="syncUp">
									<view>
										综合
									</view>
									<image style="height: 60rpx;width: 60rpx; "
										src="@/static/images/index/zonghe.png" />
								</view>
							</view>
						</view>

						<view>
							<view class="remote-img">
								<view class="abc-text">
									提高 课程
								</view>
							</view>
							<view class="remote-list flex-align-center">
								<view class="remote-list-item" @click="toLeXue">
									<view>
										乐学系列
									</view>
									<image src="@/static/images/index/xing.png" />
								</view>
								<view class="remote-list-item" style="margin-left: 32rpx;" @click="toLeGrabPoints">
									<view> 中考抢分王 </view>
									<image style=" " src="@/static/images/index/huangguan.png" />
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="index-right-footer flex-between">
				<span>今日词汇记忆 时长：00:00</span>
				<span>数量：0个 速度：0/小时</span>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxGetUserInfo
	} from '@/api/api.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {}
		},
		onLoad() {
			// store.commit('user/set_token', 66666)
			// console.log(this.$store.state.user.token,'---------token')
			// wxGetUserInfo()
		},
		methods: {
			// 跳转智能复习
			toReview() {
				uni.navigateTo({
					url: '/pages/review/review'
				})
			},
			// 跳转签到奖励
			toSignIn() {
				uni.navigateTo({
					url: '/pages/signIn/signIn'
				})
			},
			// 跳转学习打卡
			toClockIn() {
				uni.navigateTo({
					url: '/pages/clockIn/clockIn'
				})
			},
			// 跳转自学奖励
			toAward() {
				uni.navigateTo({
					url: '/pages/award/award'
				})
			},
			// 跳转抢红包
			toRedWars() {
				uni.navigateTo({
					url: '/pages/redWars/redWars'
				})
			},
			// 跳转游戏乐园
			toGame() {
				uni.navigateTo({
					url: '/pages/game/game'
				})
			},
			// 跳转pk
			toPk() {
				uni.navigateTo({
					url: '/pages/pk/pk'
				})
			},
			// 跳转排行榜
			toBillboard() {
				uni.navigateTo({
					url: '/pages/billBoard/billBoard'
				})
			},
			// 音乐
			toMusic() {
				uni.navigateTo({
					url: '/pages/music/music'
				})
			},
			// 我的好友
			toMyFriend() {
				uni.navigateTo({
					url: '/pages/friend/friend'
				})
			},
			// 商城
			toShop() {
				uni.navigateTo({
					url: '/pages/shop/shop'
				})
			},
			// 荣耀
			toGlory() {
				uni.navigateTo({
					url: '/pages/glory/glory'
				})
			},
			// 跳转同步课程
			syncUp() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/syncUpCourse'
				})
			},
			// 跳转任务课程
			toTask() {
				uni.navigateTo({
					url: '/pages/task/task'
				})
			},
			// 跳转乐学
			toLeXue() {
				uni.navigateTo({
					url: '/pages/leXue/leXue'
				})
			},
			// 跳转抢分王
			toLeGrabPoints() {
				uni.navigateTo({
					url: '/pages/grabPoints/grabPoints'
				})
			},
			// 跳转音标
			toLePhoneticSymbol() {
				uni.navigateTo({
					url: '/pages/phoneticSymbol/phoneticSymbol'
				})
			},
			// 跳转字母
			toLetter() {
				uni.navigateTo({
					url: '/pages/letter/letter'
				})
			},
			// 跳转语法
			toExpand() {
				uni.navigateTo({
					url: '/pages/expand/expand'
				})
			},
			// 自然拼读
			toNaturePhonics() {
				uni.navigateTo({
					url: '/pages/naturePhonics/naturePhonics'
				})
			},
			// 每日任务
			toDailyTask() {
				uni.navigateTo({
					url: '/pages/dailyTask/dailyTask'
				})
			},
			// 测评中心
			toReviewCenter() {
				uni.navigateTo({
					url: '/pages/reviewCenter/reviewCenter'
				})
			},
			// 学习报告
			toLearningReport() {
				uni.navigateTo({
					url: '/pages/learningReport/learningReport'
				})
			},
			// 跳转优题库
			toQuestionBank() {
				uni.navigateTo({
					url: '/pages/questionBank/questionBank'
				})
			},
			// 跳转优词典
			toDictionary() {
				uni.navigateTo({
					url: '/pages/dictionary/dictionary'
				})
			},
			// 跳转收藏本
			toCollectNote() {
				uni.navigateTo({
					url: '/pages/collectNote/collectNote'
				})
			},
			// 跳转设置
			toSet() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}


	// @function px_2_vw($px) {
	// 	// @return $px * 100 / 1040;
	// 	@return #{$px * 100 / 1040}vh;
	// }

	.index-box {
		width: 100%;
		height: 100vh;
		background: linear-gradient(90deg, #053EFA 0%, #0189FF 100%);
		// padding: 20rpx;
		padding: 41rpx 52rpx 28rpx 52rpx;
		display: flex;
		position: relative;
	}

	.index-left {
		// width: 450rpx;
		width: px_2_vw(503);
		height: 100%;
		opacity: 1;
		border-radius: 11rpx;
		background: #C3D5E6;
		position: relative;


		.index-left-header {
			padding: 0 40rpx;
			// padding: 20rpx 0 5rpx 27rpx;
			position: relative;
			display: flex;
			align-items: center;
			height: px_2_vw(215);
			// border: 1rpx solid #000;

			.rule {
				position: absolute;
				right: 0;
				bottom: 18rpx;
				background: rgba(255, 97, 97, 0.54);
				border-radius: 5rpx;
				width: 57rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #E33C64;
				font-size: 18rpx;
				text-align: center;
			}

			.user-left-box {
				width: px_2_vw(114);
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				margin-right: 30rpx;
			}

			.img {
				width: 90rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 50%;
			}

			.v-user {
				width: px_2_vw(114);
				height: px_2_vw(40);
				border-radius: 20rpx;
				background: rgba(188, 31, 255, 0.57);
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 10rpx 0 5rpx;
			}

			.zuan {
				width: 34rpx;
				height: 30rpx;
			}

			.v-user-text {
				font-size: 20rpx;
				color: #fff;
			}

			.img-right-user {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// border: 1rpx solid #000;
				height: 80%;
				font-size: 20rpx; // margin-left: 100rpx;

				.huangguan-bj {
					width: 46rpx;
					height: 41rpx;
					background: #B4DCFF;
				}

				.huangguan-box {
					width: 50rpx;
					height: 41rpx;
				}

				.vip-icon {
					width: 88rpx;
					height: 26rpx;
					margin-left: 7rpx;
				}

				.money {

					background: #FF7631;
					border-radius: 50%;
					border: 1px solid #FFB98A;
					text-align: center;
					line-height: 34rpx;
				}

				.img-right-user-img {
					width: 32rpx;
					height: 24rpx;


				}
			}

		}

		.review-box {
			width: 100%;
			height: px_2_vw(300);
			background: #fff;
			flex-direction: column;
		}

		// 智能复习
		.review {
			width: px_2_vw(423);
			height: px_2_vw(122);
			border-radius: 11rpx;
			background-image: url('../../static/images/index/fuxi.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			font-size: 42rpx;
			color: #fff;
			padding: 0 12rpx 0 22rpx;
			font-weight: 600;
			justify-content: space-around;
		}

		// 每日任务
		.btn-btm-review {
			width: px_2_vw(423);
			// height: 166rpx;
			background: #fff;
			margin-top: 11rpx;
			// padding: 20rpx 22rpx;

			.btn-view {
				width: px_2_vw(127);
				height: px_2_vw(57);
				color: #fff;
				border-radius: 11rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				font-weight: 600;
				justify-content: center;
				background: linear-gradient(90deg, #2483F0 65.28%, #2A82E4 100%, #2684F0 100%, #2784EF 100%);
			}

			.btn-btm-review-item-box {
				display: flex;
				justify-content: space-between;
			}

		}

		.bottom-btn-list {
			// height: 486rpx;
			// width: 100%;
			// background: #B4DCFF;
			// display: flex;
			// flex-wrap: wrap;
			padding-top: 20rpx;

			.bottom-btn-list-grid {

				// overflow-y: auto !important;
				// height: px_2_vw(320) !important;
			}
		}

		::v-deep .grid-text {
			padding-bottom: 12rpx !important;
		}

		.index-left-bottom {
			position: absolute;
			bottom: 0;
			height: 74rpx;
			background: #fff;
			width: 100%;
			border-radius: 0 0 12rpx 12rpx;
			display: flex;
			align-items: center;
			padding: 0 46rpx;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 65rpx;
			}
		}

		.bottom-btn-list-item {
			// width: 42px;
			width: px_2_vw(50);
			height: px_2_vw(50);
			// padding-bottom: 22rpx;
		}
	}

	.biao-1 {
		position: absolute;
		// left: 210px;
		right: 0;
		width: 60px;
		height: 60px;
		top: -4px;
	}

	.index-right {
		height: 100%;
		width: px_2_vw(1294);
		border-radius: 11rpx;
		background: #C3D5E6;
		margin-left: 31rpx;
		padding: 49rpx 60rpx 24rpx 81rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.index-right-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.index-right-header-left {
				width: px_2_vw(819);
				height: px_2_vw(419);
				border-radius: 11rpx;
				background: linear-gradient(131.77deg, #1E85FA 0%, #380EC2 100%);
				// box-shadow: 0px 0px 16px 16px rgba(195,221,239,0.16);
				padding: 30rpx 40rpx;
				display: flex;

				.book {
					width: px_2_vw(302);
					height: px_2_vw(331);
					background-image: url('../../static/images/index/book.png');
					background-size: 100% 100%;
					position: relative;

					.book-name {
						position: absolute;
						right: 33rpx;
						top: 61rpx;
						color: #662929;
						font-size: px_2_vw(48);
					}
				}




				.title-book {
					font-size: px_2_vw(36);
					color: white;
					/* 白色字体 */
					padding-top: 35rpx;
					-webkit-text-stroke: 10px rgba(50, 50, 50, 1);
					/* 使用Webkit内核的浏览器的文字描边效果 */
					text-stroke: 10px rgba(50, 50, 50, 1);
					/* 标准文字描边效果 */
				}

				.title-book-text {
					color: #fff;
					font-size: px_2_vw(36);
					position: absolute;
					top: 32rpx;
				}






				.desc-book {
					margin-top: 52rpx;
					color: #fff;
					font-size: 24rpx;
					text-align: left;
				}
			}

			.index-right-header-right {
				background: rgba(255, 255, 255, 1);
				border-radius: 11rpx;
				// width: 266rpx;
				// height: 194.97px;
				width: px_2_vw(295);
				height: px_2_vw(419);
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.task-top-icon {
					// width: 37.33px;
					// height: 48.21px;
					width: px_2_vw(70);
					height: px_2_vw(90);
					position: absolute;
					left: 30rpx;
					top: -3px;
				}

				.task-title {
					padding-top: 48px;
					text-align: center;
					color: rgba(41, 128, 185, 1);
					font-size: 36rpx;
				}

				.task-book {
					width: px_2_vw(212);
					height: px_2_vw(234);
				}
			}
		}

		.abc-box {
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;
			// padding-right: 200rpx;

			.abc-img {
				// margin-top: 8rpx;

			}

			.expand-book {
				height: 120rpx;
				width: 140rpx;
			}

			.abc-text {
				font-size: 20rpx;
				color: rgba(92, 90, 90, 1);
				text-align: left;
				width: 140rpx;
			}
		}

		.basics-course {
			display: flex;
			margin-top: 40rpx;

			.basics-course-item {
				width: px_2_vw(225);
				height: px_2_vw(101);
				border-radius: 17rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #EBF0F0;
				border: 2rpx solid #FFFFFF;
				font-size: px_2_vw(30);
				font-weight: 700;

				span {
					margin-left: 35rpx;
				}

				.zimu {
					width: px_2_vw(67);
					height: px_2_vw(40);
					margin-left: 34rpx;
				}

				.yinbiao {
					width: px_2_vw(66);
					height: px_2_vw(40);
					margin-left: 34rpx;
				}

				.ziranpindu {
					width: px_2_vw(148);
					height: px_2_vw(54);
					margin-left: 34rpx;
				}

				.basics-course-item-left-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}
			}
		}

		.expand-list {
			margin-top: 8rpx;
			display: flex;

			.expand-list-item {
				width: px_2_vw(162);
				height: px_2_vw(128);
				background: #EBF0F0;
				border-radius: 17rpx;
				color: #2B86F0;
				font-size: px_2_vw(30);
				margin-right: 22rpx;
				position: relative;
				font-weight: 700;
				border: 2rpx solid #FFFFFF;

				view {
					position: absolute;
					top: 27rpx;
					left: 33rpx;
				}

				image {
					position: absolute;
					bottom: 10rpx;
					right: 8rpx;
				}
			}
		}

		.remote-list {
			margin-top: 8rpx;

			.remote-list-item {
				// width: 266rpx;
				// height: 148rpx;
				width: px_2_vw(176);
				height: px_2_vw(129);
				background: #EBF0F0;

				border-radius: 17rpx;
				position: relative;
				font-weight: 400;
				font-size: px_2_vw(30);
				color: #2B86F0;
				text-align: center;
				font-weight: 700;
				border: 2rpx solid #FFFFFF;

				view {
					padding-top: 20rpx;
				}

				image {
					height: 66rpx;
					width: 66rpx;
					position: absolute;
					right: 12rpx;
					bottom: 4rpx;
				}
			}
		}

		// 底部
		.index-right-footer {
			color: #054CFF;
			font-size: 20rpx;
			// position: absolute;
			// bottom: 20rpx;
			// right: 60rpx;
			// text-align: right;

		}

	}

	.ccc {
		background: #CCCCCC !important;
		color: #000 !important;
	}

	.grid-text {
		color: #474747;
		font-size: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
</style>